import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  Text,
  TextInput,
  TouchableOpacity
} from 'react-native'

import NavBar from '../../components/PublicHeader';


export default class upload extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 头部标题
      topTitle: "添加描述",
      // 头部右边添加好友
      headerRightImage: require("../../assets/images/headerIcon/AddFriends.png"),
      // 相册
      uploadDatasInfoData: this.props.navigation.state.params.delivery,
      // 编写的文本
      inputText: this.props.navigation.state.params.describe
    };
  }

  componentDidMount = () => {
    // console.log(this.state.uploadDatasInfoData);
  }
  // 上传按钮 返回父级 数据
  uploadDatasInfo = () => {
    let businessFileremark = this.state.inputText
    console.log('businessFileremark')
    console.log(businessFileremark)
    this.props.navigation.state.params.callBack(businessFileremark)
    this.props.navigation.goBack()
  }
  // 当前输入的文本
  onChangeText(inputText) {
    console.log(this.state.inputText)
    this.setState({
      inputText: inputText
    })
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={"#333"}
          // leftText={"取消"}
          right={"确定"}
          pressRight={() => {
            this.uploadDatasInfo()

          }}
        />
        <View style={styles.padlr}>
          {/* 详情描述 */}
          <View style={styles.descriptionInformation}>
            <Image
              source={require('../../assets/images/iconResources/Frame11.png')}
              style={styles.iconStyle}
            />
            <TextInput
              style={styles.information}
              multiline={true}
              onChangeText={inputText => this.onChangeText(inputText)}
              value={this.state.inputText}
              placeholder={"为你的照片加点描述吧~"} />
          </View>
          {/* 上传的每一个图片 */}
          <View style={styles.row}>
            <View style={styles.item} >
              <Image style={styles.systemPrompt} source={{ uri: this.state.uploadDatasInfoData }} />
            </View>
          </View>
        </View>
      </View >
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  padlr: {
    paddingLeft: 15,
    paddingRight: 15,
    flex: 1,
    backgroundColor: "rgb(245,245,245)"
  },
  descriptionInformation: {
    paddingTop: 20,
    marginBottom: 20,
    flexDirection: "row",
    alignItems: "flex-start",
    borderBottomWidth: 1,
    borderBottomColor: "rgb(220,220,220)",
  },
  iconStyle: {
    width: 20,
    height: 20,
    marginTop: 15,
    marginRight: 10
  },
  information: {
    color: "#999",
    fontSize: 15,
    width: "90%"
  },
  row: {
    flexDirection: "row",
    flexWrap: "wrap",
    width: "100%",
    alignItems: "center",

  },
  item: {
    flexDirection: "row",
    marginTop: 10,
  },
  systemPrompt: {
    width: 310,
    height: 310,
    borderRadius: 10
  },
  systemPromptAdd: {
    width: 50,
    height: 50,
  },
  addSystemPrompt: {
    justifyContent: "center",
    alignItems: "center",
    width: 110,
    height: 110,
    borderRadius: 3,
    marginBottom: 10,
    backgroundColor: "rgb(220,220,220)"
  }

})